<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<!--  引入JQuery-->
  <script type="text/javascript" src="../js/jquery-3.6.1.js"></script>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    #divAdvertisement {
      position: fixed;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 0, 166, 0.69);
      width: 18rem;
      height: 18rem;
      padding: 3px;
    }
    #divAdvertisement button{
      border: rgba(203, 45, 45, 0.38) 2px inset;
      width: 3rem;
      height: 1.5rem;
      float: right;
      margin-left: 4px;
    }

    .clearDiv{
      clear: both;
    }
    table{
      width: 60%;
      text-align: center;
      border-collapse: collapse;
      /*border: #ead2f5 2px solid;*/
    }
    table td,th{
      border: #605964 2px solid;
    }
  </style>
</head>
<body>
<!--广告弹窗-->
<div id="divAdvertisement">
  <button id="closeBtn" title="关闭广告">关闭</button>
  <button></button>
  <button id="removeBtn" title="移除广告" disabled>移除</button>
  <div class="clearDiv"></div>
  <p style='text-indent: 2em; '>2014年以来，我国已连续9年举办国家网络安全宣传周活动，有力推动全社会网络安全意识和防护技能的提升；各类网络安全宣传，让网民们掌握相应的网络安全技能；在线上线下联动的网络安全博览会主题展，人们可以了解新型产品和示范应用……</p>
</div>
<!--正文-->
<div id="div_1">
  使用JQuery的ID选择器获取到该元素并更改其内部的内容。
  <p>更改其内部的内容。</p>
  <button onclick="upSize();">大号字体</button>
  <button onclick="downSize();">小号字体</button>
  <hr/>
  <table id="div_table_1">
    <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>工号</th>
      <th>手机号</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
      <tr>
        <td>jQuery</td>
        <td>要求读者</td>
        <td>常识</td>
        <td>制作jQuery的插件</td>
      </tr>
    </tbody>
    <tfoot>
    <tr><td colspan="4">
      <span>我是表的尾巴。</span>
    </td></tr>
    </tfoot>
  </table>
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->
<!--<p class="ppp">这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们。</p>-->

</div>
</body>
<script type="text/javascript">
  function init() {
    console.info("初始化开始...");
    //使用JQuery内的函数进行初始化内容,关键字：$
    $("#div_1").css({"width":"100%","height":"30rem","background-color":"rgba(239,239,234,0.68)"});
    console.info("初始化完成！");
  }

  function upSize() {
    $("div").css({"font-size":"24px"})
  }
  function downSize() {
    $("div").css({"font-size":"16px"})
  }

  $(init);
  // $.ajax("../index.jsp",{
  //   username: "201801",
  //   password: "123456"
  // })
  // // window.onload = init;
  // let index = 1;
  // $(".ppp").each(function (){console.info(index);index++}).text("循环填写内容"+index);
  let index = 0;
  //
  // //关闭广告1
  // $("#closeBtn").click( function() {
  //   setTimeout(function (){
  //     $("#divAdvertisement").show(2000);
  //     if (index%2 === 0){
  //       $("#divAdvertisement p").html("<p style='text-indent: 2em; '>2014年以来，我国已连续9年举办国家网络安全宣传周活动，有力推动全社会网络安全意识和防护技能的提升；各类网络安全宣传，让网民们掌握相应的网络安全技能；在线上线下联动的网络安全博览会主题展，人们可以了解新型产品和示范应用……</p>");
  //       index++;
  //     }else {$("#divAdvertisement p").html("<h3 style='text-align: center'>关不掉的弹窗广告</h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;虽然我是广告，但请不要关掉我好吗？你已经关掉我<span style='color: red; margin: 0 3px;'>"+(++index)+"</span>次了！<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生气了啊！^_^!");
  //     }},1000);
  //   $("#divAdvertisement").hide(200);
  // });
  //关闭广告2
  // $("#closeBtn").click( function() {
  //   setTimeout(function (){
  //     $("#divAdvertisement").slideDown(1234);
  //     if (index%2 === 0){
  //       $("#divAdvertisement p").html("<p style='text-indent: 2em; '>2014年以来，我国已连续9年举办国家网络安全宣传周活动，有力推动全社会网络安全意识和防护技能的提升；各类网络安全宣传，让网民们掌握相应的网络安全技能；在线上线下联动的网络安全博览会主题展，人们可以了解新型产品和示范应用……</p>");
  //       index++;
  //     }else {$("#divAdvertisement p").html("<h3 style='text-align: center'>关不掉的弹窗广告</h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;虽然我是广告，但请不要关掉我好吗？你已经关掉我<span style='color: red; margin: 0 3px;'>"+(++index)+"</span>次了！<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生气了啊！^_^!");
  //     }},1000);
  //   $("#divAdvertisement").slideUp(321);
  // });
  //关闭广告3
  $("#closeBtn").click( function() {
    setTimeout(function (){
      $("#divAdvertisement").slideToggle(1234);
      if (index%2 === 0){
        $("#divAdvertisement p").html("<p style='text-indent: 2em; '>2014年以来，我国已连续9年举办国家网络安全宣传周活动，有力推动全社会网络安全意识和防护技能的提升；各类网络安全宣传，让网民们掌握相应的网络安全技能；在线上线下联动的网络安全博览会主题展，人们可以了解新型产品和示范应用……</p>");
        index++;
      }else {$("#divAdvertisement p").html("<h3 style='text-align: center'>关不掉的弹窗广告</h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;虽然我是广告，但请不要关掉我好吗？你已经关掉我<span style='color: red; margin: 0 3px;'>"+(++index)+"</span>次了！<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生气了啊！^_^!");
      }},1000);
    $("#divAdvertisement").slideToggle(321);
  });
  //关闭广告4
  // $("#closeBtn").click( function() {
  //   setTimeout(function (){
  //     $("#divAdvertisement").fadeIn(1234);
  //     if (index%2 === 0){
  //       $("#divAdvertisement p").html("<p style='text-indent: 2em; '>2014年以来，我国已连续9年举办国家网络安全宣传周活动，有力推动全社会网络安全意识和防护技能的提升；各类网络安全宣传，让网民们掌握相应的网络安全技能；在线上线下联动的网络安全博览会主题展，人们可以了解新型产品和示范应用……</p>");
  //       index++;
  //     }else {$("#divAdvertisement p").html("<h3 style='text-align: center'>关不掉的弹窗广告</h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;虽然我是广告，但请不要关掉我好吗？你已经关掉我<span style='color: red; margin: 0 3px;'>"+(++index)+"</span>次了！<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生气了啊！^_^!");
  //     }},1000);
  //   $("#divAdvertisement").fadeOut(321);
  // });
  //移除广告
  $("#removeBtn").click(function() {
    $("#divAdvertisement").remove();
  });

  // toggle状态切换
  // $(".ppp:even").css("color","#c56bf5");//奇数行
  // $(".ppp:odd").css("color","#2502ff");//偶数行
  $("#div_table_1 tbody tr:even").css("color","blue");
  $("#div_table_1 tbody tr:odd").css("color","red");

</script>
</html>